<%@page import="com.att.network.acronym.Util, javax.sql.*, java.sql.*" %>
<!DOCTYPE html>
<html>
    <head>

        <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery Mobile 1.2</title>
        <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <style type="text/css">

            body {
                background: url(img/body-bg.jpg);
                background-repeat:repeat-y;
                background-position:center center;
                background-attachment:scroll;
                background-size:100% 100%;
            }
            .ui-page
            {
                background: #000;
                background-image:url(img/body-bg.jpg);
                background-size:cover;  
            }
            .ui-content{
                background: transparent;
            }
            .name {
                font-weight: bold;
                padding-right: 20px;

            }

            .text {

                color: darkblue;

            }

             #un{text-transform:uppercase}
             #q{text-transform:uppercase}
        </style>
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

        <script>
            
            $(document).ready( function(){
                
                /*$("#q").bind('keyup', function (e) {
                    if (e.which >= 97 && e.which <= 122) {
                        var newKey = e.which - 32;
                        // I have tried setting those
                        e.keyCode = newKey;
                        e.charCode = newKey;
                    }

                    $("#q").val(($("#q").val()).toUpperCase());
                });
                
                $("#un").bind('keyup', function (e) {
                    if (e.which >= 97 && e.which <= 122) {
                        var newKey = e.which - 32;
                        // I have tried setting those
                        e.keyCode = newKey;
                        e.charCode = newKey;
                    }

                    $("#un").val(($("#un").val()).toUpperCase());
                });*/
            })
            
            function search() {
                $.get("search.jsp", {
                    q:$("#q").val()
                }, function(data){
                    //alert(data);
                    $("#results").html(data); 
                });
            }
             
            function del(myid, obj)  {
             
                //alert($(obj).parent().html());
                //return;
                $.get("delete.jsp", {
                    id:myid
                }, function(data){
                    $(obj).parent().css("color","red");
                    $(obj).parent().html(data);
                   
                    //alert(data);
                    //$("#results").html(data); 
                });
            }
        </script>

    </head>

    <%
        response.setHeader("Cache-Control", "no-cache");
        response.setHeader("Pragma", "no-cache");
        response.setDateHeader("Expires", -1);
    %>
    <body>
        <div data-role="content" data-fullscreen="true">
            <h1 style="text-align: center;margin:0px"> Acronym Mobile</h1> 
            <h3 style="text-align:center;margin:px">
                <a href="#login" data-rel="popup" data-position-to="window" data-inline="true" data-role="button">Add A New Acronym</a> </h3>
            <form style="padding:5px 5px;margin:0px" action="index.jsp" >
                <input data-inline="true" name="q" type="text" size="10"   id="q" placeholder="search"/> 
                <%-- <button type="submit"  data-inline="true" data-hteme="b" onclick="search();return false"> Search </button> --%>
            </form>
            <div id="results">
                <% if (request.getParameter("q") != null) {%>
                <jsp:include page="search.jsp">
                    <jsp:param name="q" value= '<%= request.getParameter("q")%>' />
                </jsp:include>
                <%}%>
            </div>
        </div>
        <footer data-role="footer" data-position="fixed">
            <h5 style="color:lightblue">Created by Paul Wu</h5>
        </footer>

        <div data-role="popup" id="login" data-theme="a">
            <form style="padding:10px 20px;" method="post" action="save.jsp">
                <h3>Add a new acronym</h3>
                <label for="un" class="ui-hidden-accessible">Acronym:</label>
                <input type="js" name="name"   id="un" placeholder="acronym" />
                <label for="pw" >Stands for:</label>
                <textarea type="js" name="text"  style="background: whitesmoke;color:black;font-weight: normal" id="pw" placeholder="stands for" >
                </textarea>
                <button type="submit" data-theme="b">Submit</button>
            </form>
        </div>

    </body>
</html>